.container {
  background-color: #f4f6fa;

  .header {
    position: absolute;
    z-index: 90;
    width: 375px;
    background-image: url("~@/assets/images/my/bg.png");
    overflow: hidden;
    background-size: 100% 100%;
    padding: 84px 0 0 20px;
    align-items: center;

    > .avatar_name_id {
      > img {
        width: 69.44px;
        height: 69.44px;
        background: #ffffff;
        border: 1.39px solid #f4f6fa;
        border-radius: 8.68px;
        margin-right: 11px;
      }

      > .info {
        .name {
          font-size: 24.31px;
          font-family: Microsoft YaHei, Microsoft YaHei-Regular;
          font-weight: bold;
          text-align: left;
          color: #00aeff;
          margin-bottom: 16px;
        }

        .id {
          font-size: 12.5px;
          font-family: Microsoft YaHei, Microsoft YaHei-Regular;
          font-weight: 400;
          text-align: left;
          color: #888888;

          img {
            width: 17.36px;
            height: 12.15px;
            margin-right: 3.47px;
          }
        }
      }
    }

    .message_update_avatar {
      margin-right: 24px;

      .message {
        position: relative;
        width: 31.25px;
        height: 31.25px;
        margin-bottom: 9px;

        img {
          position: absolute;
          left: 0;
          top: 0;
          width: 31.25px;
          height: 31.25px;
        }

        .red_dot {
          position: absolute;
          right: 3px;
          top: 3px;
          width: 6.94px;
          height: 6.94px;
          background: #ff6161;
          border-radius: 50%;
        }
      }

      .text {
        font-size: 12.5px;
        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
        font-weight: 400;
        text-align: left;
        color: #cccccc;

        img {
          width: 7px;
          height: 12px;
          margin-left: 7px;
        }
      }
    }
  }

  .statistics {
    position: relative;
    z-index: 900;
    margin-top: 179px;

    .task {
      .count {
        font-size: 24.31px;
        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
        font-weight: bold;
        text-align: center;
        color: #2bc5a0;
      }
    }

    .consult {
      .count {
        font-size: 24.31px;
        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
        font-weight: bold;
        text-align: center;
        color: #00aeff;
      }
    }

    .appoint {
      .count {
        font-size: 24.31px;
        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
        font-weight: bold;
        text-align: center;
        color: #ff9500;
      }
    }

    .self {
      .count {
        font-size: 24.31px;
        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
        font-weight: bold;
        text-align: center;
        color: #00ccff;
      }
    }

    > div {
      width: 25%;
      justify-content: center;
      border-right: 1px solid #b7b7b7;
      &:last-child {
        border-right: none;
      }

      > .text {
        font-size: 12.5px;
        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
        font-weight: 400;
        text-align: left;
        color: #777777;
        margin-top: 4px;
      }
    }
  }

  .list {
    width: 354.17px;
    background: #ffffff;
    border-radius: 6.94px;
    padding: 0 10px;
    margin: 30px auto 0;

    .item {
      height: 52px;

      img {
        width: 20.83px;
        height: 20.83px;
      }

      .text {
        font-size: 14.58px;
        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
        font-weight: 400;
        text-align: left;
        color: #333333;
        margin-left: 13px;
      }

      .right {
        width: 7.99px;
        height: 14.58px;
        right: 0px;
      }
    }
  }

  .exit {
    width: 354.17px;
    height: 52.08px;
    background: #ffffff;
    border-radius: 6.94px;
    margin: 8.68px auto 0;

    .item {
      height: 52px;
      padding-left: 10px;

      img {
        width: 20.83px;
        height: 20.83px;
      }

      .text {
        font-size: 14.58px;
        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
        font-weight: 400;
        text-align: left;
        color: #333333;
        margin-left: 13px;
      }
    }
  }
}
